<template>
  <div class="workflow_container">
      <div class="workflow_header">
          <div class="workflow_header_title">
            <a-icon type="arrow-left" class="icon_button" @click="$router.back()"/>
            <span>自动化工作流程</span>
          </div>
          <div class="workflow_header_classify">
            <div class="workflow_header_classify_item active">
                工作流事件
            </div>
          </div>
          <a-button @click="addWorkflowVisible = true" type="primary" shape="round" icon="plus">
              添加工作流
          </a-button>
      </div>
      <div class="workflow_body">
        <div class="workflow_body_container">
            <div class="workflow_body_List_header">
                <div class="workflow_name">
                    流程名称
                </div>
                <div class="workflow_status">
                    状态
                </div>
                <div class="workflow_createUser">
                    创建者
                </div>
            </div>
            <div class="workflow_body_List_container">
                <div v-for="item in workflowList" :key="item.id" @mouseenter="activeItem = item.id" @mouseleave="activeItem = ''" class="workflow_body_List_item">
                    <div class="workflow_name" @click.stop="$router.push(`/workflowedit/${appId}/${item.id}`)">
                        {{item.name}}
                    </div>
                    <div class="workflow_status">
                        <a-switch checked-children="发布" un-checked-children="未发布" :checked="item.published" @change="(data) => handlePublishChange(data, item)"/>
                    </div>
                    <div class="workflow_createUser">
                        创建者
                    </div>
                    <div class="workflow_buttons" v-show="activeItem === item.id">
                        <a-icon @click.stop="handleEditWorkflow(item)" class="workflow_button" type="edit" />
                        <a-icon @click.stop="handleDeleteWorkflow(item)" class="workflow_button" type="delete" />
                    </div>
                </div>
            </div>
        </div>
      </div>
      <add-workflow-modal :visible="addWorkflowVisible" v-if="addWorkflowVisible" @cancel="addWorkflowVisible = false" @ok="handleAddWorkflowOk"></add-workflow-modal>
      <edit-workflow-modal :workflowId="workflowId" :visible="editWorkflowVisible" v-if="editWorkflowVisible" @cancel="editWorkflowVisible = false" @ok="handleEditWorkflowOk"></edit-workflow-modal>
  </div>
</template>

<script>
import {getAppWorkflowList, deleteWorkflow, updateWorkflow} from "@/api/appWorkflow"

import AddWorkflowModal from './modal/addWorkflowModal.vue'
import EditWorkflowModal from './modal/editWorkflowModal.vue'
export default {
    components:{
        AddWorkflowModal,
        EditWorkflowModal,
    },
    data(){
        return {
            addWorkflowVisible: false,
            editWorkflowVisible: false,
            workflowList: [],
            activeItem: '',
            workflowId: ''
        }
    },
    methods:{
        handleAddWorkflowOk(data){
            this.addWorkflowVisible = false
            this.$router.push(`/workflowedit/${this.appId}/${data.id}`)
        },
        async handlePublishChange(checked, item){
            item.published = checked
            await updateWorkflow({
                id: item.id,
                published: checked
            })
        },
        handleEditWorkflowOk(data){
            this.editWorkflowVisible = false
            this.getList()
        },
        handleEditWorkflow(item){
            this.workflowId = item.id
            this.editWorkflowVisible = true
        },
        async handleDeleteWorkflow(item){
            await deleteWorkflow(item.id)
            this.getList()
        },
        async getList() {
            let data = await getAppWorkflowList(this.appId)
            this.workflowList = data
        }
    },
    mounted(){
        this.getList()
    },
    computed:{
        appId(){
            return this.$route.params.appId
        }
    }
}
</script>

<style lang="less">
.workflow_container{
    height: calc(100% - 78px);
    position: relative;
    background-color: #f5f5f9;
    color: black;

    .workflow_header{
        height: 45px;
        padding: 0 20px;
        line-height: 45px;
        display: flex;
        background-color: white;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #d3d3d3;

        .workflow_header_title{
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;

            .icon_button{
                color: #888888;
                margin-right:20px
            }

            .icon_button:hover{
                color: #1e88e5;
            }
        }

        .workflow_header_classify{
            display: flex;

            .workflow_header_classify_item{
                color: #888888;
                font-weight: bold;
                height: 100%;
                cursor: pointer;
            }

            .active{
                color: #1e88e5;
                border-bottom: 2px solid #1e88e5;
            }
        }
    }

    .workflow_body{
        position: absolute;
        top: 45px;
        bottom: 0;
        width: 100%;
        padding: 20px 200px;

        .workflow_body_container{
            height: 100%;
            background-color: white;
            position: relative;

            .workflow_body_List_header{
                height: 50px;
                border-bottom: 1px solid #ddd;
                padding: 15px 30px;
                color: #757575;
                font-weight: bold;
                display: flex;
            }

            .workflow_name{
                flex: 1 1 0%;
                box-sizing: border-box;
            }
            .workflow_status{
                width: 300px;
                box-sizing: border-box;
            }
            .workflow_createUser{
                width: 240px;
                box-sizing: border-box;
            }
            .workflow_body_List_container{
                padding: 20px 20px;
                overflow-y: auto;
                position: absolute;
                top: 50px;
                bottom: 0;
                width: 100%;

                .workflow_body_List_item{
                    position: relative;
                    padding: 0 10px;
                    display: flex;
                    height: 55px;
                    border-bottom: 1px solid #eee;
                    align-items: center;
                    cursor: pointer;

                    
                    .workflow_name{
                        flex: 1 1 0%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .workflow_status{
                        font-size: 12px;
                    }
                    .workflow_createUser{
                        font-size: 12px;
                    }
                    .workflow_buttons{
                        position: absolute;
                        right: 50px;

                        .workflow_button{
                            color: #757575;
                            margin-right: 10px;
                        }
                        .workflow_button:hover{
                            color: #1e88e5;
                        }
                    }
                }
                .workflow_body_List_item:hover {
                    background-color: #f8f8f8;
                }
            }
        }
    }
}
</style>